import React, { Component } from 'react'
import { connect } from 'dva';

import { Col, Row, Progress } from 'antd';
import styled from 'styled-components';

import { UmiComponentProps, BaseComponentProps } from '@/common/type';

import Divider from '@/components/DividerItem';
import Ellipsis from '@/components/Ellipsis/';
import EchartComponent from './components/EchartComponent';
import AnnulusComponent from './components/AnnulusComponent'
import './style.css';

import empty from '@/assets/images/empty.png';
import RistImg from '@/assets/images/risk.png';

const ImgComponent = ({ src }) => <img  src={src} alt="" style={{ marginRight: 35 , width: 163 , height: 160}} />

const CircleBox = styled.span`
  width: 28px;
  height: 28px;
  display: inline-block;
  text-align: center;
  color: #ffffff;
  line-height: 28px;
  font-size: 16px;
  font-weight: 400;
  background: ${props => props.color};
  border-radius: 50%;
`

const SpanHot = styled.span`
  font-size: 16px;
  font-weight: 400;
  color: rgba(0,0,0,1);
  margin-left: 25px;
  opacity: 0.85;
`

const PNumber = styled.div`
  color: ${props => props.color};
  font-size: 32px;
  font-weight: 400;
`

const PDesc = styled.div`
  font-size: 18px;
  font-weight: 400;
  color: #000000;
  opacity: 0.85;
`

interface IData {
  id: string | number;
}

interface CardsProps {
  totalNumber: any;
  totalNumberDesc: string;
  RightComponent: Function;
  numberColor: string;
  flag?: boolean;
  classDesc?: string;
}

interface SortProps {
  sortNumber: number;
  color: string;
  content: string;
  hot: number;
}

export const HotCompontent: React.FC<SortProps> = ({ sortNumber, color, content, hot }) => {
  return (
    <>
      <div style={{ marginTop: 10 }}>
        <Row>
          <Col span={3} style={{ marginLeft: 15 }}>
            <CircleBox color={color}>
              { sortNumber }
            </CircleBox>
          </Col>
          <Col span={10} style={{ marginLeft: 15 }}>
            <Ellipsis tooltip={true} lines={1}>
              { content || '' }
            </Ellipsis>
          </Col>
          <Col span={3} style={{ marginLeft: 15, }}>
            <SpanHot>{ hot }</SpanHot>
          </Col>
        </Row>
      </div>
    </>
  )
}

export interface P {
  list: {
    data: Array<IData>;
    dataCnt: number;
  },
  hotRiskList?: Object
  riskStatistic?: {
    state32: number;
    state1: number;
    state8: number;
    state16: number;
    rate1: number;
    rate8: number;
    rate16: number;
  }
}

interface State {
  current: number;
  mode: any;
}

export const CardsComponent: React.FC<CardsProps> = ({
  totalNumber, totalNumberDesc, RightComponent, numberColor, flag = false, classDesc
}) => {
  return (
    <>
      <div className={classDesc} style={{ display: 'flex', marginLeft:50, width: 382, paddingTop: 29 }}>
        <div style={{ marginRight: 30 ,marginTop:45}}>
          <PNumber color={numberColor}>{totalNumber}</PNumber>
          <PDesc>{totalNumberDesc}</PDesc>
        </div>
        <div style={{ color: numberColor, position: 'relative' }}>
          {/* {
            !flag && (
              <div style={{ position: 'absolute', fontSize: '15px', top: '98px', left: '33px' }}>
                占总隐患数
              </div>
            )
          } */}
          <div style={{position: 'absolute'}}>
          <RightComponent />
          </div>
        </div>
      </div>
    </>
  )
}

const ListComponent = (props) => {
  const { hotRiskList } = props;
  return (
    <>
      <div style={{ padding: '0 20px', height: 400, overflowY: 'auto' }}>
        {
          Array.isArray(hotRiskList) && hotRiskList.map((item, index) => (
            <HotCompontent
              key={index}
              sortNumber={index + 1}
              color={index <= 2 ? '#F2637B' : '#FB8E32'}
              content={item.location} hot={item.total}
            />
          ))
        }
      </div>
    </>
  )
}

type Props = P & UmiComponentProps & BaseComponentProps;

@connect(({ analyse_risk }) => ({
  hotRiskList: analyse_risk.hotRiskList,
  riskStatistic: analyse_risk.riskStatistic,
}))
class AnalyseRisk extends Component<Props, State> {

  readonly state: State = {
    current: 1,
    mode: null,
  };

  customizeRenderEmpty = () => (
    <Row style={{ height: '100%', flexDirection: 'column' }} type="flex" justify="space-between">
      <Col span={24}><img src={empty} height={'110px'} /></Col>
      <Col span={24}>暂无数据</Col>
    </Row>
  );

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({ type: 'analyse_risk/queryRiskHotList' });
    dispatch({ type: 'analyse_risk/queryRiskStatistic' });
  }

  render() {
    const { hotRiskList } = this.props
    const { riskStatistic } = this.props
    const { state32 = 0, state1 = 0, state8 = 0, state16 = 0, rate1 = 0, rate8 = 0, rate16 = 0 } = riskStatistic;
    //待核实
    const CheckRisk = Divider({
      height: '270px',
      WrapperComponent: () =>
        <CardsComponent
        classDesc='handled'
          flag={false} totalNumber={state16} totalNumberDesc='待核实隐患数'
          RightComponent={() =>
            <AnnulusComponent dataNumber={rate16} color='#4ECB73'/>
            // <Progress 
            //   width={148} type="circle" percent={rate16} format={percent => `${percent}%`}
            // />
          }
          numberColor='#4ECB73'
        />,
      icon: 'icon-TestDesign-VisitProcess-editors-gray', title: '待核实', type: 'none'
    });

    //待指派
    const WaitRisk = Divider({
      height: '270px',
      WrapperComponent: () =>
        <CardsComponent
          classDesc='wait' totalNumber={state1} totalNumberDesc='待指派隐患数'
          RightComponent={() =>
            // <Progress
            //   width={148} type="circle" percent={rate1}
            //   format={percent => `${percent}%`}
            // />}
            <AnnulusComponent dataNumber={rate1} color='#3AA0FF'/>
          }
          numberColor='#3AA0FF'
        />,
      icon: 'icon-assign-to', title: '待指派', type: 'none'
    });

    //待处理
    const HandleRisk = Divider({
      height: '270px',
      WrapperComponent: () =>
        <CardsComponent
          classDesc='doing' totalNumber={state8} totalNumberDesc='待处理隐患数'
          RightComponent={() => 
          // <Progress 
          //   width={148} type="circle" percent={rate8} format={percent => `${percent}%`}
          // />}
          <AnnulusComponent dataNumber={rate8} color='#FB8E32'/>
        }
          numberColor='#FB8E32'
        />,
      icon: 'icon-time' , title: '待处理', type: 'none'
    });

    //已完成
    const FinishRisk = Divider({
      height: '270px',
      WrapperComponent: () =>
        <CardsComponent
          classDesc='handled' flag={true} totalNumber={state32} totalNumberDesc='已完成隐患数'
          RightComponent={() => <ImgComponent src={RistImg}/>}
          numberColor='#4ECB73'
        />,
      icon: 'icon-processed', title: '已完成', type: 'none'
    });

    const RiskTrend = Divider({
      WrapperComponent: () => <EchartComponent />,
      icon: 'icon-trend', title: '隐患趋势', type: 'none'
    });

    const RiskSort = Divider({
      WrapperComponent: () => <ListComponent hotRiskList={hotRiskList} />,
      icon: 'icon-upper', title: '隐患高发部位TOP10', type: 'none'
    });

    return (
      <section style={{ height: '100%', width: '100%' }}>
        <Row gutter={6}>
          <Col span={6} >
              <FinishRisk />
            </Col>
          <Col span={6} >
            <WaitRisk />
          </Col>
          <Col span={6} >
            <HandleRisk />
          </Col>
          <Col span={6} >
            <CheckRisk />
          </Col>
        </Row>
        <Row gutter={10} style={{ marginTop: 30 }}>
          <Col span={19}>
            <RiskTrend />
          </Col>
          <Col span={5}>
            <RiskSort />
          </Col>
        </Row>
      </section>
    )
  }
}

export default AnalyseRisk;
